<template>
    <div>
        <el-dialog :title="isAdd ? '添加角色' : '编辑角色'" :visible.sync="isShow" :before-close="cancel" center>
            <el-form :model="roleForm" ref="roleRef" :rules="rules">
                <el-form-item label="角色名称" prop="rolename" :label-width="formLabelWidth">
                    <el-input v-model="roleForm.rolename" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色权限" :label-width="formLabelWidth" prop="menus">
                    <el-tree ref="tree" :data="$store.getters['menu/getMenuList']" default-expand-all show-checkbox
                        node-key="id" :props="defaultProps" :check-strictly="true">
                    </el-tree>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
                    <el-switch v-model="roleForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>

                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { roleAdd, roleInfo, roleEdit } from '../../request/api';
export default {
    // props和data同级
    props: ['isShow', 'isAdd'],
    data() {
        return {

            defaultProps: {
                children: 'children',
                label: 'title'
            },
            roleForm: {
                rolename: '',//角色名称  string
                menus: '',//角色权限id数组    字符串类型
                status: 1,//状态 1正常 2禁用  number
            },
            formLabelWidth: '120px',
            rules: {
                rolename: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],

            }
        }
    },
    methods: {
        // 点击取消关闭弹窗  并清空内容及规则验证
        cancel() {
            // 通过子父传值 修改isShow的状态值
            this.$emit('cancel', false);
            this.reset();
            this.resetRules();
            // 清空tree结构
            this.$refs.tree.setCheckedKeys([]);
        },
        // 清空内容
        reset() {
            this.roleForm = {
                rolename: '',//角色名称  string
                menus: '',//角色权限id数组    字符串类型
                status: 1,//状态 1正常 2禁用  number
            }
        },
        // 清空规则验证
        resetRules() {
            this.$refs.roleRef.resetFields();
        },
        
        // 数据回显
        roleinfo(id) {
            // console.log('回显');
            roleInfo({ id }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.roleForm = res.list;
                    this.roleForm.id = id;
                    // 后端返回的menus是string类型  而前端需要的是array类型  需要使用split方法进行转换
                    // console.log(this.roleForm);
                    // 如果后端返回的menus是空就给一个空数组  否则使用split方法将字符串转换成数组
                     this.$refs.tree.setCheckedKeys(this.roleForm.menus?this.roleForm.menus.split(','):[])
                }
            })
        },
        // 点击确定关闭弹窗  提交表单,并清空内容及规则验证
        add() {
            // console.log(this.roleForm);
            // return
            this.$refs.roleRef.validate(value => {
                if (value) {
                    // 通过key值获取选种的结构
                    // console.log(this.$refs.tree.getCheckedKeys());//返回的数组格式 后台需要字符串格式  需要转换
                    this.roleForm.menus =  this.$refs.tree.getCheckedKeys().join(',');
                    // console.log(this.roleForm);
                    if (this.isAdd) {
                        // return
                        // 添加
                        roleAdd(this.roleForm).then(res => {
                            if (res.code == 200) {
                                console.log(res);
                                // 添加成功
                                this.$message.success(res.msg)
                                this.cancel();
                                // 重新渲染视图
                                this.$store.dispatch('role/getRoleListActions')

                            } else {
                                // 添加失败
                                this.$message.error(res.msg);
                            }
                        })
                    } else {
                        // 修改
                        roleEdit(this.roleForm).then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                // 清空表单
                                this.cancel();
                                // 重新渲染视图
                                this.$store.dispatch('role/getRoleListActions')
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }

                }
            })
        }
    },
    mounted() {
        // console.log(this.isShow);
    },
    watch: {},
    computed: {},
    filters: {},
    components: {},
}
</script>
<style scoped></style>